<template>
    <div class="text_list_box">
      <el-table
        ref="tableRef"
        :data="tableData"
        height="400"
        max-height="550"
        tooltip-effect="light"
        class="table_box"
        header-row-class-name="table_header_title"
      >
        <el-table-column width="60px" align="center">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-checkbox
                v-model="scope.row.isCheck"
                @change="chooseMaterial(scope.row)"
              ></el-checkbox>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="素材标题" align="center" width="100px">
          <template #default="scope">
            <div class="line3">{{scope.row.title || '--'}}</div>
          </template>
        </el-table-column>
        <el-table-column label="小程序AppID" align="center" width="140px">
            <template #default="scope">
            <div class="line3">{{scope.row.appid || '--'}}</div>
          </template>
        </el-table-column>
        <el-table-column label="封面" align="center" width="80px">
          <template #default="scope">
            <div class="official">
              <div class="img">
                <img v-if="scope.row.image_url" :src="scope.row.image_url" alt="">
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="页面地址" align="center">
          <template #default="scope">
            <div class="line3">{{scope.row.path || '--'}}</div>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, reactive, watch, computed, onMounted } from "vue";
  import { ElMessage } from 'element-plus'
  import lodash from 'lodash'
  
  // const props = defineProps(["baseList"]);
  
  interface PropsType {
    baseList?: any[],
    selectBaseList?: any[],
    remainNum?: (string | number),
    multiple?: boolean,
    totalNum: number
  }
  const props = withDefaults(defineProps<PropsType>(), {
    baseList: ()=>[],
    selectBaseList: ()=>[],
    remainNum: 0,
    multiple: true,
    totalNum: 9
  })
  
  const emit = defineEmits(["getData"]);
  
  const chooseMaterial = (item: any) => {
      let indx = props.selectBaseList.findIndex((it: any) => it.id === item.id)
      if(indx === -1){
        if (props.remainNum <= 0) {
          ElMessage.error(`最多可选${props.totalNum}个素材`);
          item.isCheck = false
          return
        }
      }
      let deleteItem = null
      // if(props.multiple){     // 目前只支持单选
      if(true){
        if (indx === -1) {
          item.isCheck = true
          props.selectBaseList.push(lodash.cloneDeep(item))
        } else {
          deleteItem = item
          props.selectBaseList.splice(indx, 1)
          item.isCheck = false
        }
      }else{
        if (indx === -1) {
          props.baseList.forEach(ite=>{
            ite.isCheck = false
          })
          item.isCheck = true
          props.selectBaseList.splice(0)
          props.selectBaseList.push(lodash.cloneDeep(item))
        } else {
          item.isCheck = false
          props.selectBaseList.splice(0)
        }
      }
      if(props.selectBaseList?.length){
        if(props.selectBaseList[0]?.article_detail?.length > props.totalNum){
          props.selectBaseList[0].article_detail.splice(props.totalNum)
        }
      }
      emit('getData', {
        deleteItem,
        id: '15',
        type: 11,
        typeStr: 'miniProgram',
        data: props.selectBaseList
      })
    }
  
  const tableData = computed(() => {
    let arr: any[] = []
      props.baseList.forEach((item: any) => {
        // item.isCheck = false
        arr.push(item)
      })
      return arr
  });

onMounted(()=>{
  if(props.selectBaseList.length){
    emit('getData', {
      deleteItem: null,
      id: '15',
      type: 11,
      typeStr: 'miniProgram',
      data: props.selectBaseList
    })
  }
})
  
  </script>
  
  <style lang="scss" scoped>
  .text_list_box {
    width: 100%;
    .line3{
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3;
      word-break: break-all;  
    }
    .title-text{
      text-align: left;
      font-size: 14px;
      color: #555;
      line-height: 1.6;
    }
    .draft_title{
      width: 100%;
      .item{
        width: 100%;
        display: flex;
        align-items: center;
        margin-bottom: 6px;
        &:last-of-type {
          border-bottom: none;
        }
        .img{
          width: 50px;
          height: 50px;
          border-radius: 8px;
          background-color: #f6f6f6;
          overflow: hidden;
          margin-right: 6px;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .title{
          flex: 1;
          line-height: 1.6;
          font-size: 12px;
          color: #666;
          text-align: left;
        }
      }
    }
  
    .title-icon{
      display: flex;
      align-items: center;
      color: #FF6B00;
      margin-top: 6px;
      cursor: pointer;
      span{
        font-size: 12px;
        
      }
    }
  
    .official{
      width: 100%;
      display: flex;
      align-items: center;
      .img{
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: #f6f6f6;
        margin-right: 6px;
        overflow: hidden;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .name{
        flex: 1;
        line-height: 1.6;
        font-size: 13px;
        color: #555;
        text-align: left;
      }
    }
  }
  </style>
  <style lang="scss">
  .text_list_box {
    .el-table--scrollable-y ::-webkit-scrollbar {
      display: none;
    }
    .table_header_title {
      th.el-table__cell {
        background: #f9f9f9;
        padding: 10px 0;
      }
    }
  }
  </style>
  